<template>
  <div class="login-wrap">
    <div class="ms-login">
      <div class="login-img">
        <img src="../../../static/img/logo.png" alt="">
      </div>
      <!--登录-->
      <div v-show="register">
        <div class="login">
          <Form ref="formInline" :model="formInline" :rules="ruleInline" inline>
            <FormItem prop="name">
              <Input type="text" size="large" v-model="formInline.name" prefix="md-contact" placeholder="账号"/>
            </FormItem>
            <FormItem prop="pwd">
              <Input type="password" size="large" v-model="formInline.pwd" prefix="md-lock" placeholder="密码"/>
            </FormItem>
          </Form>
        </div>
        <div class="password_service">
          <Checkbox v-model="remember">记住密码</Checkbox>
          <span @click="forget">忘记密码</span>
        </div>
        <div class="login_btn">
          <Button type="primary" @click="handleSubmit('formInline')">登录</Button>
        </div>
      </div>
      <!--忘记密码-->
      <div v-show="password">
        <div class="login">
          <div class="user">
            <p class="p p1">
              <span class="spa">用户名：</span>
              <Input v-model="user" @on-blur="users" type="text" placeholder="输入用户名" style="width: 270px"/>
              <span style="width: 20px;display: inline-block">
                  <Icon v-show="right" style="font-weight: bold;color: #00a050" type="md-checkmark"/>
                  <Icon v-show="wrong" style="font-weight: bold;color: red" type="md-close"/>
              </span>
            </p>
            <p class="p p2">
              <span class="spa">密码：</span>
              <Input v-model="pwd" @on-blur="passwords" type="password" placeholder="输入密码" style="width: 270px"/>
              <span style="width: 20px;display: inline-block">
                  <Icon v-show="right1" style="font-weight: bold;color: #00a050" type="md-checkmark"/>
                  <Icon v-show="wrong1" style="font-weight: bold;color: red" type="md-close"/>
              </span>
            </p>
            <p class="p p2">
              <span class="spa">确认密码：</span>
              <Input v-model="ConPassword" @on-blur="ConPasswords" type="password" placeholder="输入确认密码" style="width: 270px"/>
              <span style="width: 20px;display: inline-block">
                  <Icon v-show="right2" style="font-weight: bold;color: #00a050" type="md-checkmark"/>
                  <Icon v-show="wrong2" style="font-weight: bold;color: red" type="md-close"/>
              </span>
            </p>
            <p class="p p2">
              <span class="spa">手机号：</span>
              <Input v-model="Mobile" @on-blur="Mobiles"  type="text" placeholder="输入手机号" style="width: 270px"/>
              <span style="width: 20px;display: inline-block">
                  <Icon v-show="right3" style="font-weight: bold;color: #00a050" type="md-checkmark"/>
                  <Icon v-show="wrong3" style="font-weight: bold;color: red" type="md-close"/>
              </span>
            </p>
            <p class="p p2">
              <span class="spa">验证码：</span>
              <Input v-model="code" @on-blur="codes" type="text" placeholder="输入验证码" style="width: 270px"/>
              <span style="width: 20px;display: inline-block">
                  <Icon v-show="right4" style="font-weight: bold;color: #00a050" type="md-checkmark"/>
                  <Icon v-show="wrong4" style="font-weight: bold;color: red" type="md-close"/>
              </span>
              <span v-show="sendAuthCode" class="spa1"><Button type="primary" @click="gain">获取手机验证码</Button></span>
              <span v-show="!sendAuthCode" class="spa1"><Button type="primary">{{auth_time}}秒之重新获取</Button></span>
            </p>
            <!--            <p class="p p2">
                          <Checkbox class="Checkbox" v-model="checkbox">阅读并接受《用户协议》及《隐私权保护声明》</Checkbox>
                        </p>-->
            <p class="p p2">
              <Button type="primary" style="width: 100%;margin-bottom: 20px" @click="Register">确认</Button>
            </p>
          </div>
        </div>
      </div>

    </div>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        remember: false,
        URL: this.$api.url,
        /*登录*/
        formInline: {
          name: '',
          pwd: '',
        },
        ruleInline: {
          name: [
            {required: true, message: '请输入用户名', trigger: 'blur'}
          ],
          pwd: [
            {required: true, message: '请输入密码', trigger: 'blur'},
          ],
        },
        /*忘记密码*/
        right:false,
        wrong:false,
        right1:false,
        wrong1:false,
        right2:false,
        wrong2:false,
        right3:false,
        wrong3:false,
        right4:false,
        wrong4:false,
        /*忘记密码*/
        user: '',
        pwd: '',
        ConPassword: '',
        Mobile: '',
        code: '',
        auth_time: 0,
        sendAuthCode:true,

        checkbox:true,

        register: true,
        password: false,
      }
    },
    methods: {
      handleSubmit(name) {
        const self = this;
        if (self.remember == true) {
          self.setCookie(self.formInline.name, self.formInline.pwd, 7);
        } else {
          self.clearCookie();
        }
        this.$refs[name].validate((valid) => {
          if (valid) {
            this.$axios.post(this.URL+'/user/login', this.formInline).then(function (res) {
              if(res.data != ''){
                if(res.data.state == 0){
                  localStorage.setItem('ms_user', this.formInline.name);
                  localStorage.setItem('ms_userid', res.data.id);
                  this.$router.push('/');
                }
              }else{
                this.$Message.error('账号或密码不正确!');
              }
            }.bind(this)).catch(function (error) {
              console.log(error);
            });
          } else {
            return false;
          }
        });
      },
      //设置cookie
      setCookie(c_name, c_pwd, exdays) {
        var exdate = new Date();
        exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays);
        window.document.cookie = "userName" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString();
        window.document.cookie = "userPwd" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
      },
      //读取cookie
      getCookie() {
        if (document.cookie.length > 0) {
          var arr = document.cookie.split('; ');
          for (var i = 0; i < arr.length; i++) {
            var arr2 = arr[i].split('=');
            if (arr2[0] == 'userName') {
              this.formInline.name = arr2[1];
            } else if (arr2[0] == 'userPwd') {
              this.formInline.pwd = arr2[1];
            }
          }
        }
      },
      //清除cookie
      clearCookie() {
        this.setCookie("", "", -1);
      },
      forget(){
        this.register = false;
        this.password = true;
      },
      /*忘记密码*/
      /*用户名*/
      users() {
        if(this.user!=''){
          if(this.user.length >= 6 && this.user.length <= 20){
            this.$axios.get(this.URL+'/user/verify/name/'+this.user).then((res) => {
              if(res.data == false){
                this.right = true;
                this.wrong = false;
              }else{
                this.right = false;
                this.wrong = true;
              }
            });
          }else{
            this.wrong = true;
            this.right = false;
          }
        }else{
          this.wrong = false;
          this.right = false;
        }
      },
      /*密码*/
      passwords(){
        if(this.pwd!=''){
          this.wrong1 = true;
          if(this.pwd.length >= 6 && this.pwd.length <= 20){
            this.right1 = true;
            this.wrong1 = false;
          }else{
            this.right1 = false;
            this.wrong1 = true;
          }
        }else{
          this.right1 = false;
          this.wrong1 = false;
        }
      },
      /*确认密码*/
      ConPasswords(){
        if(this.ConPassword!=''){
          this.wrong2 = true;
          if(this.ConPassword == this.pwd){
            this.right2 = true;
            this.wrong2 = false;
          }else{
            this.right2 = false;
            this.wrong2 = true;
          }
        }else{
          this.right2 = false;
          this.wrong2 = false;
        }
      },
      /*手机号*/
      Mobiles(){
        if(this.Mobile!=''){
          if(this.Mobile.length == 11){
            let reg =  /^1\d{10}$/;
            if(reg.test(this.Mobile)){
              this.$axios.get(this.URL+'/user/verify/phone/'+this.Mobile).then((res) => {
                if(res.data == false){
                  this.right3 = true;
                  this.wrong3 = false;
                }else{
                  this.right3 = false;
                  this.wrong3 = true;
                }
              });
            }else{
              this.right3 = false;
              this.wrong3 = true;
            }
          }else{
            this.right3 = false;
            this.wrong3 = true;
          }
        }else{
          this.wrong3 = false;
          this.right3 = false;
        }
      },
      /*验证码*/
      codes(){
        if(this.code!=''){
          if(this.code.length == 4){
            this.$axios.get(this.URL+'/user/verify/auth/code/'+this.Mobile+'/'+this.code,{withCredentials: true}).then((res) => {
              if(res.data.code == 200){
                this.right4 = true;
                this.wrong4 = false;
              }else{
                this.right4 = false;
                this.wrong4 = true;
              }
            });
          }
          else{
            this.wrong4 = true;
          }
        }else{
          this.wrong4 = false;
        }
      },
      /*获取手机验证码*/
      gain(){
        if(this.Mobile.length == 11){
          this.sendAuthCode = false;
          this.auth_time = 60;
          let auth_timetimer = setInterval(() => {
            this.auth_time--;
            if (this.auth_time <= 0) {
              this.sendAuthCode = true;
              clearInterval(auth_timetimer);
            }
          }, 1000);
          this.$axios.get(this.URL + '/user/get/auth/code/' + this.Mobile,{withCredentials: true}).then((res) => {
            if (res.data.code == 200) {
            }
          });
        }else{
          this.wrong3 = true;
        }
      },
      /*注册用户*/
      Register(){
        if(this.user!=''){
          if(this.password!=''){
            if(this.ConPassword!=''){
              if(this.Mobile!=''){
                if(this.code!=''){
                  this.$axios({
                    method: 'POST',
                    headers: {'Content-Type': 'application/json;charset=UTF-8'},
                    data: JSON.stringify({
                      name: this.user,
                      pwd: this.pwd,
                      phone: this.Mobile,
                    }),
                    url: this.URL + '/user/manageUP',
                  }).then((res) => {
                    if(res.data.code == 200){
                      this.$Message.error('注册成功!');
                      setTimeout(() => {
                        this.$router.go(0);
                      }, 100);
                    }
                  })
                }else{
                  this.wrong4 = true;
                }
              }else{
                this.wrong3 = true;
              }
            }else{
              this.wrong2 = true;
            }
          }else{
            this.wrong1 = true;
          }
        }else{
          this.wrong = true;
        }
      },
      GET(url,data){
        this.$axios.get(url+data).then((res) => {
          if(res.data == true){

          }
        });
      }
    },
  }
</script>

<style scoped>
  .login-wrap {
    width: 100%;
    height: 100%;
    background: url("../../../static/img/login_b.jpg") no-repeat;
    background-size: 100% 100%;
    position: absolute;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../assets/img/login_b.jpg');
  }
  .ms-login {
    width: 460px;
    background: #fff;
    margin: 10% auto 0;
    border-radius: 10px;
    text-align: center;
  }
  .login-img > img {
    width: 372px;
  }
  .login {
    width: 390px;
    margin: 0 auto;
  }
  .login > .ivu-form {
    width: 390px;
  }
  .login > .ivu-form .ivu-form-item {
    width: 390px;
  }
  .password_service {
    height: 40px;
    line-height: 30px;
    width: 390px;
    margin: 0 auto;
    padding-bottom: 65px;
  }
  .password_service .ivu-checkbox-wrapper {
    float: left;
    font-size: 16px;
  }
  .password_service span {
    float: right;
    font-size: 16px;
    color: blue;
    cursor:pointer;
  }
  .login_btn {
    width: 390px;
    margin: 0 auto;
    padding-bottom: 35px;
  }
  .login_btn .ivu-btn {
    width: 100%;
    height: 50px;
    font-size: 20px;
  }

  .login .user .p, .login .register .p {
    padding: 10px 0;
    font-weight: bold;
    font-size: 14px;
  }
  .login .user .p .spa {
    display: inline-block;
    width: 85px;
  }
  .login .user .p .spa1 {
    display: inline-block;
    padding-top: 10px;
    margin-left: -90px;
  }
</style>
